<template>
  <div class="login-code">
    <el-image :src="state.date.codeUrl" @click="method.getCode"  class="login-code-img"/>
  </div>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import {getCodeImg} from "@/api/auth";

const state = reactive({
  date:{
    codeUrl:"",
    captchaEnabled:Boolean
  }
})

const emits = defineEmits(["update:uuid"]);

const method={
  init:async ()=>{
   await method.getCode();
  },
  async getCode(){
    await getCodeImg().then(res => {
      state.date.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
      if (state.date.captchaEnabled) {
        state.date.codeUrl = "data:image/gif;base64," + res.img;
       const uuid= res.uuid;
        emits('update:uuid',uuid)
      }
    });
  }
}


onMounted(()=>{
  method.init();
})

</script>

<style scoped>
.login-code {
  width: 100%;
  height: 38px;
  float: right;
}
.login-code img {
  cursor: pointer;
  vertical-align: middle;
}

.login-code-img {
  height: 38px;
}

</style>
